<template>
  <div class="temp_options">
    <ul>
      <li v-for="item in options" :key="item.id" @click="clickLi(item.id)" :class="{ 'activeColor': item.id === defaultId,  }">
        <div><img :src="item.imgPath" alt=""></div>
        <div>{{ item.name }}</div>
      </li>
    </ul>
    <a href="#" class="btn" @click="startBtn">
      <div v-if="isLoading">
        <Loading></Loading>
      </div>
      <div v-else> 开始合成 </div>
    </a>
  </div>
</template>
  
<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import Loading from "../main/Loading.vue";
import { ElMessage, ElMessageBox, UploadFile } from "element-plus";
import { useTtsStore } from "@/store/store";
import { storeToRefs } from "pinia";
import { Delete, Plus } from '@element-plus/icons-vue'

const disabled = ref(false)

const options: any = reactive([
  { name: '模板一', id: 1, imgPath: 'electron.png' },
  { name: '模板二', id: 2, imgPath: 'electron.png' },
  { name: '模板三', id: 3, imgPath: 'electron.png' },
  { name: '模板四', id: 4, imgPath: 'electron.png' },
])

const defaultId = ref(1)

const ttsStore = useTtsStore();
const {
  fileList,
  formConfig,
  page,
  currConfigName,
  config,
  isLoading,
} = storeToRefs(ttsStore);
const Store = require("electron-store");
const store = new Store();


const startBtn = () => {
  isLoading.value = true;
  ttsStore.start();
};

const clickLi = (id: any) => {
  defaultId.value = id
}
</script>
  
<style scoped>
.temp_options {
  flex: 1;
}

.temp_options ul {
  display: flex;
  flex-wrap: wrap;
  /* 允许换行 */
  justify-content: space-between;
  list-style-type: none;
  padding: 0;
}

.temp_options ul li {
  list-style: none;
  display: inline-block;
  text-align: center;
  flex-basis: calc(33.33% - 10px);
  /* 每个 li 标签占据 1/3 宽度，减去一些空白间距 */
  margin-bottom: 10px;
  /* 添加底部间距，用于换行时的间隔 */
}

.temp_options ul li img {
  width: calc(30%);
}

.btn:link,
.btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(27, 27, 27);
  padding: 8px 30px;
  border: 1px solid;
  border-radius: 1000px;
  display: inline-block;
  transition: all 0.2s;
  position: relative;
}

.btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(27, 27, 27, 0.5);
}

.btn:active {
  transform: translateY(-3px);
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -1;
  transition: all 0.3s;
}

.btn:hover::after {
  background-color: rgb(0, 238, 255);
  transform: scaleX(1.4) scaleY(1.5);
  opacity: 0;
}

.activeColor {
  background-color: rgb(0, 238, 255);
}</style>
  